<template>
  <div class="box">
    <el-row>
      <el-col :span="14">
        <div class="bg-purple">
          <div class="box-bottom">
            <div class="shiXin">招标公告</div>
            <el-tag type="warning" class="right clickable" effect="dark" size="medium" @click="routerNoticeList">更多</el-tag>
          </div>
          <!--最近30天竞标-->
          <el-table :data="tableData" stripe @row-click="viewNotice" row-class-name="custom-row" style="width: 100%;top: -25px">
            <el-table-column align="center" prop="uKaiTime" label="竞标时间" sortable></el-table-column>
            <el-table-column align="center" prop="uTitle" label="公告标题" width="500"></el-table-column>
            <el-table-column align="center" prop="uUpdateTime" label="公示时间" sortable></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="10">
        <div class=" bg-purple-light" style="margin-left: 15px">
          <div class="box-bottom">
            <div class="shiXin">通知公告</div>
            <el-tag type="warning" class="right clickable" effect="dark" size="medium" @click="routerNoticeList">更多</el-tag>
          </div>
          <el-empty :image-size="200" v-if="noticeList.length === 0"></el-empty>
          <!--通知公告-->
          <el-row v-for="item in noticeList" :key="item.index">
            <el-col :span="12">
              <div class="bg-info">{{ item.noticeTitle }}</div>
            </el-col>
            <el-col :span="10">
              <div class="bg-info">{{ item.createTime }}</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {getList,getSystemNoticeList} from "@/api/home";
import modal from "@/plugins/modal";

export default {
  name: 'MoreList',
  data() {
    return {
      tableData: [],
      total: 0,
      noticeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNum: null,
        uid: null,
        sid: null,
        uTitle: null,
        uProject: null,
        uMoney: null,
        uGetTime: null,
        uAcceptTime: null,
        uEndTime: null,
        uKaiTime: null,
        fjAnnex: null,
        fjStatus: null,
        fjRemark: null,
        uUpdateTime: null,
      },
    }
  },
  created() {
    this.info();
  },
  methods:{
    info(){
      this.queryParams.fjStatus = 5;//已发布状态
      this.queryParams.uKaiTime = '2020-11-11';//只要非空即可
      if (sessionStorage.getItem("token") == null) {
        console.log('tttttttttttttttttttttttttttttttttttttttttttttt')
        //没有登录，不知道hid，所以只显示公开招标的公告
        this.queryParams.sWay = 1;
        this.queryParams.hid = null;
      }else{
        //登录了，拿到hid,获取所有的
        this.queryParams.sWay = null;
        this.queryParams.hid = JSON.parse(sessionStorage.getItem("bsSupplier")).hid;
      }
      console.log('sssssssssssssssssqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq')
      console.log(this.queryParams)
      getList(this.queryParams).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      })

      //通知公告
      getSystemNoticeList().then(res => {
        this.noticeList = res.data.rows;
      })
    },
    //点击更多查看招标公告信息
    routerNoticeList(){
      this.$router.push("/noticeList")
    },
    //点击最近竞标公告行
    viewNotice(row) {
      if (sessionStorage.getItem("token") == null) {
        modal.alertWarning("注册供应商并登录后查看")
      } else {
        this.$router.push('/detail?uid='+ row.uid + '&sid=' + row.sid +'&type=bidNotice&read=1');
      }
    },
  }
}
</script>
<style>
.box {
  width: 1400px;
  margin: 20px auto;
  min-height: 200px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.grid-content {
  height: auto;
  padding-bottom: 10px;
  width: 800px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.bg-purple-light {
  width: 570px;
}

.box-bottom {
  border-bottom: 2px solid #0065B5;
  margin-bottom: 10px;
}

.shiXin {
  width: 100px;
  height: 56px;
  background-color: #0065B5;
  color: #ffffff;
  text-align: center;
  line-height: 56px;
}

.right {
  float: right;
  position: relative;
  top: -40px;
  right: 20px;
}

.clickable {
  cursor: pointer;
}
.custom-row:hover {
  cursor: pointer;
}

.bg-info {
  width: 350px;
  height: 30px;
//border: 1px solid #000; margin-left: 10px; text-align: center;
  line-height: 30px;
  font-size: 14px;
}
</style>
